import { Suspense } from "react";
import { notFound } from "next/navigation";
import { type SearchParams } from "@/types/table";
import { getComplianceSurveyTemplate, getComplianceResponsesWithPagination, getComplianceResponseStats } from "@/lib/compliance/services";
import { ComplianceResponsesPageClient } from "@/lib/compliance/responses/compliance-responses-page-client";
import { Shell } from "@/components/shell";
import { Skeleton } from "@/components/ui/skeleton";
import { DataTableSkeleton } from "@/components/data-table/data-table-skeleton";
import { InformationButton } from "@/components/information/information-button";

interface ComplianceResponsesPageProps {
  params: Promise<{
    templateId: string;
  }>;
  searchParams: Promise<SearchParams>;
}

export default async function ComplianceResponsesPage({ params, searchParams }: ComplianceResponsesPageProps) {
  const resolvedParams = await params;
  const resolvedSearchParams = await searchParams;
  const templateId = parseInt(resolvedParams.templateId);
  
  if (isNaN(templateId)) {
    notFound();
  }

  // pageSize 기반으로 모드 자동 결정 (items 페이지와 동일한 로직)
  const search = { page: 1, perPage: 10, ...resolvedSearchParams };
  const isInfiniteMode = search.perPage >= 1_000_000;
 
  // 페이지네이션 모드일 때만 서버에서 데이터 가져오기
  // 무한 스크롤 모드에서는 클라이언트에서 SWR로 데이터 로드
  const promises = isInfiniteMode
     ? undefined
     : Promise.all([
        getComplianceSurveyTemplate(templateId),
        getComplianceResponsesWithPagination(templateId),
        getComplianceResponseStats(templateId),
      ]);

  if (!promises) {
    // 무한 스크롤 모드
    return (
      <Shell className="gap-2">
        <div className="flex items-center justify-between space-y-2">
          <div className="flex items-center justify-between space-y-2">
            <div>
              <div className="flex items-center gap-2">
                <h2 className="text-2xl font-bold tracking-tight">
                  응답 현황
                </h2>
                <InformationButton pagePath="evcp/compliance" />
              </div>
              <p className="text-muted-foreground">
                준법 설문조사 응답 현황을 확인할 수 있습니다.
              </p>
            </div>
          </div>
        </div>
        
        <Suspense fallback={<div>응답 목록을 불러오는 중...</div>}>
          <ComplianceResponsesPageClient 
            templateId={templateId}
            promises={undefined}
            isInfiniteMode={true}
          />
        </Suspense>
      </Shell>
    );
  }

  const [template, responses, stats] = await promises;

  if (!template) {
    notFound();
  }

  return (
    <Shell className="gap-2">
      <div className="flex items-center justify-between space-y-2">
        <div className="flex items-center justify-between space-y-2">
          <div>
            <div className="flex items-center gap-2">
              <h2 className="text-2xl font-bold tracking-tight">
                응답 현황
              </h2>
              <InformationButton pagePath="evcp/compliance" />
            </div>
            <p className="text-muted-foreground">
              템플릿: {template.name} - 준법 설문조사 응답 현황을 확인할 수 있습니다.
            </p>
          </div>
        </div>
      </div>

      <Suspense fallback={<Skeleton className="h-7 w-52" />}>
        {/* 추가 기능들 */}
      </Suspense>
      
      <Suspense
        fallback={
          <DataTableSkeleton
            columnCount={8}
            searchableColumnCount={1}
            filterableColumnCount={2}
            cellWidths={["10rem", "12rem", "15rem", "20rem", "12rem", "10rem", "12rem", "8rem"]}
            shrinkZero
          />
        }
      >
        <ComplianceResponsesPageClient 
          templateId={templateId}
          promises={Promise.resolve([responses, stats])}
          isInfiniteMode={false}
        />
      </Suspense>
    </Shell>
  );
}